<template>
  <div class="md-select-tree-base">
    <el-popover ref="mdSelectTreePopover" placement="bottom" :width="popoverWidth" trigger="click" popper-class="md-select-tree-popover">
      <div class="md-select-tree-data">
        <el-tree ref="mdSelectTree" :default-expand-all="defaultExpandAll" :data="treeData" :node-key="defaultProps.value" :props="defaultProps" highlight-current @node-click="handleClick">
        </el-tree>
      </div>
      <el-input v-model="label" ref="mdSelectTreeInput" readonly :placeholder="placeholder" slot="reference"></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'MdSelectTreeBaseComponent',
  props: {
    value: [Array, Object, String, Number],
    placeholder: {
      type: String,
      default: '请选择'
    },
    data: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label',
          value: 'id'
        }
      }
    },
    /**
     * 是否全部展开
     */
    defaultExpandAll: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      val: null,
      label: null,
      treeData: [],
      popoverWidth: 0
    }
  },
  watch: {
    data: {
      handler (val) {
        this.treeData = val
      },
      deep: true,
      immediate: true
    },
    value: {
      handler (val) {
        this.val = val
        this.$nextTick(() => {
          this.$refs.mdSelectTree.setCurrentKey(this.val)
          const currentNode = this.$refs.mdSelectTree.getCurrentNode()
          if (currentNode) {
            this.label = currentNode[this.defaultProps.label]
          } else {
            this.label = null
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.popoverWidth = this.$refs.mdSelectTreeInput.$el.offsetWidth
    })
  },
  methods: {
    handleClick (data, node, instance) {
      console.log(data, '---data')
      console.log(node, '---node')
      console.log(instance, '---instance')
      // console.log(this.$refs.mdSelectTree.getCheckedNodes(false, true))
      this.breadList = []
      this.getParentNodes(node)
      console.log(this.breadList)
      this.label = data[this.defaultProps.label]
      this.$emit('input', data[this.defaultProps.value])
      this.$emit('change', data)
      this.$refs.mdSelectTreePopover.doClose()
    },
    getParentNodes (node) {
      // let parentNode = null
      // treeData.forEach(item => {
      //   if (item.children) {
      //     if (item.children.some(child => child.deptId === nodeId)) {
      //       parentNode = item
      //     } else if (!parentNode) {
      //       parentNode = this.getParentNodes(nodeId, item.children)
      //     }
      //   }
      // })
      // return parentNode

      if (!node.parent) {// 若无父节点，则直接返回
        return
      }
      this.breadList.unshift(node.data.deptId)// 将value保存起来
      //调用递归
      this.getParentNodes(node.parent)
    }
  }
}
</script>

<style lang="less" scoped>
.md-select-tree-base {
}
</style>